import RegisterInformation from '@/components/register/RegisterInformation.vue'
import RegisterVerify from '@/components/register/RegisterVerify.vue'
import UserRegister from '@/views/UserRegister.vue'
import GuideAttractions from '@/views/GuideAttractions.vue'
import RedEducation from '@/views/RedEducation.vue'
import TravelForum from '@/views/TravelForum.vue'
import TravelMain from '@/views/TravelMain.vue'
import TravelMap from '@/views/TravelMap.vue'
import { createRouter, createWebHistory } from 'vue-router'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'
import { computed } from 'vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [
    {
      //home页
      path: '/',
      name: 'home',
      component: () => import('@/views/TravelMain.vue'),
    },
    {
      //主要推荐页面
      path: '/main',
      name: 'main',
      component: TravelMain,
    },
    {
      //攻略·景点大全
      path: '/attractions',
      name: 'attractions',
      component: GuideAttractions,
    },
    {
      //自定义地图页面
      path: '/map',
      name: 'map',
      component: TravelMap,
      meta: {
        KeepAlive: true,
      },
    },
    {
      //论坛会
      path: '/forum',
      name: 'forum',
      component: TravelForum,
      redirect: '/forum/relevant',
      children: [
        {
          path: 'relevant',
          component: () => import('@/views/PassageRelevant.vue'),
        },
        {
          path: 'latest',
          component: () => import('@/views/PassageLatest.vue'),
        },
        {
          path: 'top',
          component: () => import('@/views/PassageTop.vue'),
        },
        {
          path: 'passage-filter',
          component: () => import('@/views/PassageFilters.vue'),
        },
      ],
    },
    {
      //红色教育页面
      path: '/red-education',
      name: 'red-education',
      component: RedEducation,
    },
    //用户注册页面
    {
      path: '/user-register',
      name: 'user-register',
      component: UserRegister,
      redirect: '/user-register/register1',
      children: [
        {
          path: 'register1',
          name: 'register1',
          component: () => import('@/components/register/RegisterVerify.vue'),
        },
        {
          name: 'register2',
          path: 'register2',
          component: () => import('@/components/register/RegisterInformation.vue'),
        },
        {
          path: 'register3',
          name: 'register3',
          component: () => import('@/components/register/RegisterInformationVerify.vue'),
        },
      ],
    },
    //用户登录页面
    {
      path: '/user-login',
      component: () => import('@/views/UserLogin.vue'), //懒加载
    },
    //错误信息处理页面
    {
      path: '/error/:message',
      name: 'error',
      component: () => import('@/views/ErrorPage.vue'),
    },
    //风景画页面
    {
      path: '/landscape',
      component: () => import('@/composables/LandscapeWall.vue'),
    },
    //游记详情页展示页面
    {
      path: '/show-article/:articleId',
      name: 'showArticle',
      component: () => import('@/views/ShowArticlePage.vue'),
    },
    //景点详情页展示
    {
      path: '/show-scenic/:scenicId',
      name: 'showScenic',
      component: () => import('@/views/ScenicPage.vue'),
    },
    //城市详情页展示
    {
      path: '/show-city/:city',
      name: 'showCity',
      component: () => import('@/views/CityPage.vue'),
    },
    //需要登录才能查看页面
    //个人信息
    {
      path: '/auth/user-profile',
      name: 'userProfile',
      component: () => import('@/views/UserProfile.vue'),
    },
    //写游记
    {
      path: '/auth/edite-travel',
      component: () => import('@/views/TravelEditor.vue'),
    },
    {
      path: '/handleEvent',
      name:'handleEvent',
      component: () => import('@/views/ResultPage.vue'),
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    // savedPosition 是浏览器前进后退时记录的滚动位置
    // 如果有 savedPosition（如浏览器前进/后退），就返回它
    if (savedPosition) {
      return savedPosition
    } else {
      // 新页面跳转，滚动到顶部
      return { top: 0 }
    }
  },
})

//全局路由守卫
router.beforeEach((to, from, next) => {
  const currentUserStore = useCurrentUserStore()
  const loginUser = computed(() => currentUserStore.loginUser)
  const toUrl: string = to.fullPath
  if (toUrl.startsWith('/auth')) {
    if (loginUser.value.status == 0) {
      console.error(`用户状态有问题${loginUser.value.status}`)
      ElMessage.error('未登录')
      next({
        // `/user-login?redirect=${toUrl}`
        path: '/user-login',
        query: { redirect: to.fullPath }, //传递参数
      }) //重定向至登录位置
      return
    }
  }
  next()
})

export default router //暴露路由
